<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>threear</title>
	<meta name="description" content="Documentation for threear">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
	<div class="tsd-page-toolbar">
		<div class="container">
			<div class="table-wrap">
				<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
					<div class="field">
						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
						<input id="tsd-search-field" type="text" />
					</div>
					<ul class="results">
						<li class="state loading">Preparing search index...</li>
						<li class="state failure">The search index is not available</li>
					</ul>
					<a href="index.html" class="title">threear</a>
				</div>
				<div class="table-cell" id="tsd-widgets">
					<div id="tsd-filter">
						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
						<div class="tsd-filter-group">
							<div class="tsd-select" id="tsd-filter-visibility">
								<span class="tsd-select-label">All</span>
								<ul class="tsd-select-list">
									<li data-value="public">Public</li>
									<li data-value="protected">Public/Protected</li>
									<li data-value="private" class="selected">All</li>
								</ul>
							</div>
							<input type="checkbox" id="tsd-filter-inherited" checked />
							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
							<input type="checkbox" id="tsd-filter-externals" checked />
							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
							<input type="checkbox" id="tsd-filter-only-exported" />
							<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
						</div>
					</div>
					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
				</div>
			</div>
		</div>
	</div>
	<div class="tsd-page-title">
		<div class="container">
			<ul class="tsd-breadcrumb">
				<li>
					<a href="globals.html">Globals</a>
				</li>
			</ul>
			<h1>threear</h1>
		</div>
	</div>
</header>
<div class="container container-main">
	<div class="row">
		<div class="col-8 col-content">
			<div class="tsd-panel tsd-typography">
				<a href="#three-ar" id="three-ar" style="color: inherit; text-decoration: none;">
					<h1>THREE AR</h1>
				</a>
				<a href="#introduction" id="introduction" style="color: inherit; text-decoration: none;">
					<h2>Introduction</h2>
				</a>
				<p>THREE AR aims to provide a simple to use Augmented Reality API for the web, leveraging three.js&#39;s 3D capabilities. THREE AR is written in <a href="https://www.typescriptlang.org/">TypeScript</a>. You can see a description of the aims of THREE AR <a href="./AIMS.md">here</a>.</p>
				<a href="#usage" id="usage" style="color: inherit; text-decoration: none;">
					<h2>Usage</h2>
				</a>
				<p>THREE AR works with npm and also as a CDN. For npm you can install in the following manner:</p>
				<pre><code>npm <span class="hljs-keyword">install</span> threear</code></pre>
				<p>using a CDN you can include a script tag from unpkg like so:</p>
				<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/threear&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
				<a href="#demo" id="demo" style="color: inherit; text-decoration: none;">
					<h2>Demo</h2>
				</a>
				<p>The examples folder features <a href="https://JamesLMilner.github.io/THREEAR/examples/basic.html">a basic demo</a>, you can open it on a mobile device and point your camera at the following marker:</p>
				<p align="center">
					<img width="400px" alt="Hiro Marker" src="./data/hiro.jpg"/>
				</p>
				<a href="#documentation-and-examples" id="documentation-and-examples" style="color: inherit; text-decoration: none;">
					<h2>Documentation and Examples</h2>
				</a>
				<ul>
					<li><a href="https://JamesLMilner.github.io/THREEAR/docs">Docs</a></li>
					<li><a href="https://JamesLMilner.github.io/THREEAR/">Examples (Source)</a></li>
					<li><a href="https://JamesLMilner.github.io/THREEAR/">Examples (Live)</a></li>
					<li><a href="./CHANGELOG.md">Change Log</a></li>
				</ul>
				<a href="#development-and-contribution" id="development-and-contribution" style="color: inherit; text-decoration: none;">
					<h2>Development and Contribution</h2>
				</a>
				<p>Please see the <a href="./DEVELOPMENT.md">development guide</a>. If you are interested in contributing, it may be a good starting point to see the list of open issues on our <a href="https://github.com/JamesLMilner/THREEAR/issues">GitHub issues page</a>. Please take a moment to read the <a href="./CODE_OF_CONDUCT.md">code of conduct</a>.</p>
				<a href="#acknowledgements" id="acknowledgements" style="color: inherit; text-decoration: none;">
					<h2>Acknowledgements</h2>
				</a>
				<ul>
					<li><a href="https://github.com/jeromeetienne/AR.js">ar.js</a> on which this library is based</li>
					<li><a href="https://github.com/artoolkitx/jsartoolkit5">jsartoolkit</a> the Emscripten library from the C code for artoolkit, on which this library is underpinned</li>
				</ul>
				<a href="#license" id="license" style="color: inherit; text-decoration: none;">
					<h2>License</h2>
				</a>
				<p>All files within the <code>src/artoolkit</code> folder are licensed LGPLv3</p>
				<p>All other files are MIT Licensed and are adapted from the <a href="https://github.com/jeromeetienne/AR.js/blob/master/LICENSE.txt">work of Jerome Etienne</a> </p>
			</div>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class="globals  ">
						<a href="globals.html"><em>Globals</em></a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
					<li class=" tsd-kind-class tsd-is-external">
						<a href="classes/barcodemarker.html" class="tsd-kind-icon">Barcode<wbr>Marker</a>
					</li>
					<li class=" tsd-kind-class tsd-is-external">
						<a href="classes/controller.html" class="tsd-kind-icon">Controller</a>
					</li>
					<li class=" tsd-kind-class tsd-is-external">
						<a href="classes/patternmarker.html" class="tsd-kind-icon">Pattern<wbr>Marker</a>
					</li>
					<li class=" tsd-kind-class tsd-is-external">
						<a href="classes/source.html" class="tsd-kind-icon">Source</a>
					</li>
					<li class=" tsd-kind-interface tsd-is-external">
						<a href="interfaces/barcodemarkerparameters.html" class="tsd-kind-icon">Barcode<wbr>Marker<wbr>Parameters</a>
					</li>
					<li class=" tsd-kind-interface tsd-is-external">
						<a href="interfaces/controllerparameters.html" class="tsd-kind-icon">Controller<wbr>Parameters</a>
					</li>
					<li class=" tsd-kind-interface tsd-is-external">
						<a href="interfaces/markerpositioningparameters.html" class="tsd-kind-icon">Marker<wbr>Positioning<wbr>Parameters</a>
					</li>
					<li class=" tsd-kind-interface tsd-is-external">
						<a href="interfaces/markers.html" class="tsd-kind-icon">Markers</a>
					</li>
					<li class=" tsd-kind-interface tsd-is-external">
						<a href="interfaces/patternmarkerparameters.html" class="tsd-kind-icon">Pattern<wbr>Marker<wbr>Parameters</a>
					</li>
					<li class=" tsd-kind-interface tsd-is-external">
						<a href="interfaces/sourceparameters.html" class="tsd-kind-icon">Source<wbr>Parameters</a>
					</li>
					<li class=" tsd-kind-variable tsd-is-external">
						<a href="globals.html#controller" class="tsd-kind-icon">controller</a>
					</li>
					<li class=" tsd-kind-function tsd-is-external">
						<a href="globals.html#initialize" class="tsd-kind-icon">initialize</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</div>
<footer class="with-border-bottom">
	<div class="container">
		<h2>Legend</h2>
		<div class="tsd-legend-group">
		</div>
	</div>
</footer>
<div class="container tsd-generator">
	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
</body>
</html>